<!--
 * @Author: lzeng
 * @Date: 2020-05-20 09:18:10
 * @description: 会员卡历史记录
-->
<template>
  <view class="main">
    <view class="list" :style="{height:currentH+'px'}">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="head">
          <view>{{item.type_text}}</view>
          <view class="date">{{filters.formatDate(item.created_at, 'yyyy-MM-dd HH:mm:ss')||''}}</view>
          <view v-if="index != list.length" class="line"></view>
        </view>
        <view class="foot">{{item.num_desc}}</view>
      </view>
      <view v-if="nomore&&list.length<1" class="empty_view">
        <image src="/static/images/commission/commission-empty.png" class="empty_img" />
        <view class="tit">暂无任何内容</view>
      </view>
      <view v-if="nomore&&list.length>0" class="nomore">暂无更多数据~</view>
    </view>
  </view>
</template>

<script>
  import {
    filters
  } from '@/utils/tools.js'
  export default {
    name: 'history',
    data() {
      return {
        list: [],
        type: ['赠送领取','邀请购买钻石卡','邀请订单累计购买'],
        nomore: false,
        pageNo: 1,
        pageSize: 12,
        filters: filters,
        currentH: 0
      }
    },
    onPullDownRefresh() {
      this.pageNo = 1
      this.list = []
      this.nomore = false
      this.Pagination(false)
    },
    onReachBottom() {
      this.pageNo += 1
      this.Pagination()
    },
    onLoad() {
      this.$nextTick(()=>{
        uni.getSystemInfo({
          success:(res)=>{
           this.currentH = res.windowHeight 
          }
        });
      })
      this.Pagination()
    },
    methods: {
      Pagination(showLoading) {
        console.log('this.pageNo', this.pageNo)
        this.$api.mineApi.getCardRecords({
          page_no: this.pageNo,
          page_size: this.pageSize
        }, showLoading).then(res => {
          setTimeout(function() {
            uni.stopPullDownRefresh()
          }, 500)
          if (res.code == 0) {
            let data = res.data
            this.list = this.list.concat(data)
            if (data.length < this.pageSize) {
              this.nomore = true
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../index.scss";
  .head {
    .date {
      font-size: 24rpx;
      color: #999999;
    }
  }
  .item {
    padding: 36rpx 45rpx;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #F5F5F5;
    background-color: #fff;
    .foot {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .list {
    margin-bottom: 100rpx;
  }
  .main {
    
  }
  page {
    // background-color: #fff;
  }
</style>
